<template>
  <view class="detail-container">
    <ve-card :title="'换车记录' + (index + 1)" v-for="(item, index) in list" :key="item.replaceGiveId">
      <ve-cell-val label="换车时间" :value="item.replaceTime" />
      <ve-cell-val label="换车人" :value="item.replaceStaffName" />
      <ve-cell label="备注">
        <view>
          <text>{{ item.replaceRemark || '-' }}</text>
          <text class="remark-btn" @click="showRemarkModel(item)">修改备注</text>
        </view>
      </ve-cell>
      <view class="ve-card-header-border-line-content"></view>
      <ve-cell label="换下车牌">
        <view style="flex: 1"
          >{{ item.replaceReturnLicenseNo || '-' }} <ve-tag color="red" v-if="item.replaceReturnLabel" :title="item.replaceReturnLabel"
        /></view>
        <text class="btn" @click="toDetail(item, 1)">查看详情</text>
      </ve-cell>
      <ve-cell-val label="换下车型" :value="item.replaceReturnModelName" />
      <view class="ve-card-header-border-line-content"></view>
      <ve-cell label="换上车牌">
        <view style="flex: 1"
          >{{ item.replaceGiveLicenseNo || '-' }} <ve-tag color="red" v-if="item.replaceGiveLabel" :title="item.replaceGiveLabel"
        /></view>
        <text class="btn" @click="toDetail(item, 2)">查看详情</text>
        <preFile is-button :id="item.contractFileId" v-if="item.contractFileId" />
      </ve-cell>
      <ve-cell-val label="换上车型" :value="item.replaceGiveModelName" />
    </ve-card>
    <ve-empty v-if="list.length == 0"></ve-empty>
  </view>
  <!-- 修改备注弹框 -->
  <ve-modal title="修改备注" v-model="remarkVisible">
    <ve-form>
      <ve-form-item label="换车备注" :borderBottom="false">
        <ve-input v-model="form.replaceRemark" placeholder="请输入换车备注" :maxlength="200" />
      </ve-form-item>
    </ve-form>
    <template #footer>
      <ve-button type="link" size="long" class="cancel-text" @click="remarkVisible = false">关闭</ve-button>
      <view class="divider"></view>
      <ve-button type="link" size="long" class="btn-text" @click="onConfirm">确认</ve-button>
    </template>
  </ve-modal>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { carReplaceListAPI, updateRemarkLogApi } from '@/api/order/lOrder'
  import preFile from '@/components/upload-file/pre-file'

  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })

  const list = ref([])
  const getList = async () => {
    const res = await carReplaceListAPI({ id: props.orderId })
    if (res.code == 200) {
      list.value = res.result
    }
  }
  // 详情
  const toDetail = (record, status) => {
    uni.navigateTo({
      url: `/pages/order/long-order/detail/up-car-info?status=${status}&data=${JSON.stringify(record)}`,
    })
  }
  // 换车记录弹框
  const remarkVisible = ref(false)
  // 换车备注
  const form = ref({})
  const showRemarkModel = (val) => {
    form.value = JSON.parse(JSON.stringify(val))
    remarkVisible.value = true
  }
  // 提交修改换车备注
  const onConfirm = () => {
    let params = {
      id: props.orderId, // 换车记录id
      replaceReturnId: form.value.replaceReturnId, // 换上记录id
      replaceGiveId: form.value.replaceGiveId, // 换下记录id
      replaceRemark: form.value.replaceRemark, // 换车备注,
    }
    updateRemarkLogApi(params).then((res) => {
      if (res.code == 200) {
        getList()
        uni.showToast({
          icon: 'none',
          title: '修改换车备注成功',
        })
        remarkVisible.value = false
      }
    })
  }

  onMounted(() => {
    if (props.orderId) {
      getList()
    }
  })
</script>

<style lang="scss" scoped>
  .detail-container {
    padding: 24rpx;
  }
  .upinfo {
    padding: 24rpx;
  }
  .ve-card-header-border-line-content {
    width: 100%;
    height: 2rpx;
    background-color: rgba(216, 216, 216, 0.3);
  }
  .btn {
    flex-shrink: 0;
    margin-left: 12rpx;
    border-radius: 4rpx;
    border: 1px solid #3072f6;
    font-size: 24rpx;
    font-weight: 400;
    color: #3072f6;
    line-height: 44rpx;
    height: 44rpx;
    padding: 0 16rpx;
  }
  .remark-btn {
    color: #1890ff;
    cursor: pointer;
    margin: 0 20rpx;
  }
  .btn-text {
    font-size: 27rpx;
    color: #3072f6;
  }
  .divider {
    width: 2rpx;
    height: 100%;
    background: #e5e6eb;
  }
  .cancel-text {
    font-size: 27rpx;
    color: #191c27;
  }
</style>
